/* 合同管理》合同关联 */
<template>
  <div>
    <el-row class="samples-info-box">
      <el-col :span="15">
        <el-row :gutter="10">
          <el-collapse-transition>
            <el-col ref="moreSearch" :lg="17" class="samples-searchBar-wrapper" :class="{'samples-show-more':ismore}">
              <el-col :lg="8" :xl="6">
                <el-input
                  v-model="searchList.code"
                  size="small"
                  placeholder="合同编码"
                  clearable
                  class="samples-search-input"
                />
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-input
                  v-model="searchList.name"
                  size="small"
                  placeholder="合同名称"
                  clearable
                  class="samples-search-input"
                />
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-input
                  v-model="searchList.partyName"
                  size="small"
                  placeholder="单位名称"
                  clearable
                  class="samples-search-input"
                />
              </el-col>
              <!-- <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.classify"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="合同分类"
                  style="width:100%"
                >
                  <el-option v-for="item in contractClassify" :key="item.code" :label="item.name" :value="item.name" />
                </el-select>
              </el-col> -->
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.classify"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="合同分类"
                  style="width:100%"
                >
                  <el-option v-for="item in contractClassify" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-col>
              <!-- <el-col :lg="8" :xl="6">
                <el-input
                  v-model="searchList.b1"
                  size="small"
                  placeholder="状态"
                  clearable
                  class="samples-search-input"
                />
              </el-col> -->
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.status"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="状态"
                  style="width:100%"
                >
                  <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :lg="16" :xl="12">
                <!-- <el-input
                  v-model="searchList.b2"
                  size="small"
                  placeholder="开始日期 ~ 结束日期"
                  clearable
                  class="samples-search-input"
                /> -->
                <el-date-picker
                  v-model="timeArr"
                  size="small"
                  style="width:100%"
                  value-format="yyyyMMdd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-col>
            </el-col>
          </el-collapse-transition>
          <el-col :lg="7">
            <el-button size="small" type="primary" plain class="samples-search-btn" @click="searchBtn()">
              <i class="el-icon-search" />
            </el-button>
            <el-button size="small" type="text" class="samples-search-btn samples-ismore-button" @click="moreClick">
              MORE
              <i class="samples-search-icon" :class="[ismore?'el-icon-arrow-up':'el-icon-arrow-down']" />
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右半边按钮区域 -->
      <el-col :span="9" class="samples-text-right">
        <!-- 点击新增关联  跳转到新增页面 -->
        <el-button size="small" type="success" @click="insertLink()">新 增</el-button>
        <!-- <el-dropdown trigger="click" placement="bottom-start" class="samples-margin-left" @visible-change="dropClick">
          <el-button ref="dropdown-button-deal" size="small" type="primary" plain class="samples-btn-icon-right">
            更多操作
            <i :class="[dropShow?'el-icon-arrow-up':'el-icon-arrow-down']" />
          </el-button>
          <el-dropdown-menu slot="dropdown" class="samples-drop-menu-deal">
            <el-dropdown-item>生 效</el-dropdown-item>
            <el-dropdown-item>禁 用</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </el-col>
    </el-row>
    <my-table :data-objects="dataObjects" @Slist="sonList" />
  </div>
</template>

<script>
import myTable from './components/indexTable'
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
export default {
  components: {
    myTable
  },

  data() {
    return {
      contractClassify: [],
      dropShow: false,
      ismore: false,
      timeArr: [],
      searchList: {
        code: '',
        name: '',
        partyName: '',
        classify: '',
        status: '',
        time: '',
        page: 1,
        pageSize: 10
      },
      dataObjects: {},
      stateList: [
        { value: 1, label: '已关联' },
        { value: 2, label: '关联完成' }
      ]

    }
  },

  computed: {},

  activated() {
    if (this.$route.query.isTag != true) {
      this.getList()
    }
  },
  created() {
    if (this.$route.query.isTag != false) {
      this.getList()
    }
    this.getDict()
  },
  beforeRouteLeave(to, from, next) {
    if (to.name && to.name.indexOf('contractCorrelation/detail') != -1) {
      to.meta.title = to.params.tagsName
    }
    next()
  },

  methods: {
    moreClick() {
      this.ismore = !this.ismore
      const ref = this.$refs.moreSearch.$el
      if (this.ismore) {
        ref.style.height = ref.scrollHeight + 'px'
      } else {
        ref.style.height = '32px'
      }
    },
    dropClick(show) {
      this.dropShow = show
    },
    getDict() {
      contractCorrelationApi.dictionary('contract_classify').then(res => {
        if (res.code === 1) {
          this.contractClassify = res.data
          console.log('contractClassify', this.contractClassify)
        }
      })
    },
    // 点击新增按钮  跳转到新增页面
    insertLink() {
      this.$router.push('/contractManage/contractCorrelation/insert')
    },
    getList() {
      if (!this.timeArr) {
        this.timeArr = []
      }
      if (this.timeArr.length > 0) {
        this.searchList.time = this.timeArr[0] + '-' + this.timeArr[1]
      } else {
        this.searchList.time = ''
      }
      contractCorrelationApi.contractRelationPage(this.searchList).then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.dataObjects = res.data
        }
      })
    },
    searchBtn() {
      this.searchList.page = 1
      this.getList()
    },
    sonList(val) {
      this.searchList.page = val.page
      this.searchList.pageSize = val.pageSize
    }
  }
}
</script>
<style lang='scss' scoped>
</style>

